<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
  <style>
    body{
      display: flex;
      flex-flow: row wrap;
      overflow: hidden;
      margin: 0;
      padding: 0;
      position: relative;
    }
    .center{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    canvas, video {
      border: 1px solid #eee;
      margin-top: 5%;
    }
    h1{
      text-align: center;
    }
    video{
      opacity: 0;
    }
    #cvs{
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="module">
    import {Component, Lve} from '../core/index.js'
    const component = new Component({
        data: () => {
            return {
              cvs: {}, // 隐藏画布
              cvs2: {}, // 转换后展示画布
              video: {}, // 视频对象
              ctx: {}, // 隐藏画布对象
              ctx2: {}, // 转换后展示画布对象
              title: 'Lve.js'
            };
        },
        watch: {
        },
        methods: {
          init() {
            this.cvs = document.getElementById('cvs')
            this.cvs2 = document.getElementById('cvs2')
            this.video = document.getElementById('video')
            this.ctx = this.cvs.getContext('2d')
            this.ctx2 = this.cvs2.getContext('2d')
            this.cvs.height = this.cvs2.height = this.video.offsetHeight
            this.cvs.width = this.cvs2.width = this.video.offsetWidth
            this.playVideo()
          },
          playVideo() {
            requestAnimationFrame(this.playVideo.bind(this))
            const { width, height } = this.cvs
            this.ctx.drawImage(video, 0, 0, width, height)
            const data = this.ctx.getImageData(0, 0, width, height).data
            this.ctx2.clearRect(0, 0, width, height)
            const bl = 8
            this.ctx2.fontSize = '12px'
            for (let i = 0; i < data.length; i+=4 * bl) {
              const x = parseInt((i + 1)%(width * 4) / 4)
              const y = parseInt(i / (width * 4))
              if (x % bl === 0 && y % bl === 0) {
                const g = parseInt((data[i] + data[i + 1] + data[i + 2]) / 1.5)
                this.ctx2.fillStyle = `rgba(${g}, ${g}, ${g}, ${data[i + 3]})`
                this.ctx2.fillText('8', x, y)
              }
            }
          },
          videoTab() {
            if (this.video.paused) {
              this.video.play()
            } else {
              this.video.pause()
            }
          }
        },
        template:
            `
              <div class="center">
                <h1>{{title}}</h1>
                <div>
                  <canvas id="cvs2" @click="videoTab"></canvas>
                  <video id="video" src="./2e3d6097-b233-40af-88f4-a90a74a33fa0.mp4" @canplay="init" loop width="300"></video>
                  
                  <canvas id="cvs"></canvas>
                </div>
              </div>
            `
    });
    new Lve({
        mount: '#root', 
        component: component
    })
  </script>
</body>
</html>